<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui">
    <h:form id="formularioDetalle" >
        <p:panelGrid style="width:100%;margin: 10px auto;" id="panelDetalle">
            <p:row>
                <p:column>
                    <h:outputLabel id="lblArticulo" value="ARTICULO(*): " class="lblForm" />
                </p:column>
                <p:column >
                    <p:selectOneMenu id="cbxArticulo" required="true" value="#{BKDetalleBC.detalleFormulario.idArticulo.id}"> 
                        <f:selectItem itemLabel="Seleccionar" itemValue="0" /> 
                        <f:selectItems value="#{BKDetalleBC.listaArticulo}" var="articulo"
                                       itemLabel="#{articulo.nombreComercial}" itemValue="#{articulo.id}"/>
                    </p:selectOneMenu>
                    <p:message for="cbxArticulo" display="text"/>	
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <h:outputLabel id="lblUnidadM" value="UNIDAD MED(*): " class="lblForm" />
                </p:column>
                <p:column>
                    <p:selectOneMenu id="cbxUnidadMedida" required="true" 
                                     value="#{BKDetalleBC.detalleFormulario.unidadMedida.id}"> 
                        <f:selectItem itemLabel="Seleccionar" itemValue="0" /> 
                        <f:selectItems value="#{BKBoletaCompra.listaUnidadMedida}" var="unidad" 
                                       itemLabel="#{unidad.abrev}" itemValue="#{unidad.id}" />	
                    </p:selectOneMenu>	
                    <p:message for="cbxUnidadMedida" display="text"/>
                </p:column>
            </p:row>
            <p:row>
                <p:column>
                    <h:outputLabel id="lblCantidad" value="CANTIDAD(*): " class="lblForm" />
                </p:column>
                <p:column>
                    <p:inputText id="txtCantidad" required="true" maxlength="10" 
                                 value="#{BKDetalleBC.detalleFormulario.cantidad}" >
                        <f:convertNumber maxFractionDigits="2" maxIntegerDigits="10"  />
                    </p:inputText>
                    <p:message for="txtCantidad" display="text"/>	
                    <span class="formatComment">Ejemplo: 1112.90</span>
                </p:column>
            </p:row>
            <p:row>
                <p:column >
                    <h:outputLabel id="lblPrecio" value="PRECIO(*): " class="lblForm" />
                </p:column> 
                <p:column >
                    <p:inputText id="txtPrecio" required="true" maxlength="12" label="txtPrecio"
                                 value="#{BKDetalleBC.detalleFormulario.precioUnitario}" >
                        <f:convertNumber maxFractionDigits="2" maxIntegerDigits="10"/>
                    </p:inputText>
                    <p:message for="txtPrecio" display="text" />
                </p:column>
            </p:row>
            
            <p:row>
                <p:column colspan="2" style="text-align: center">
                    <p:commandButton style="text-align: center;" value="AGREGAR" update=":formulario:detalleBoleta,:formulario:cbxMoneda,
                                     :formulario:btnGuardar,panelDetalle"
                                     actionListener="#{MBDetalleBC.agregarDetalleBoleta}"
                                     oncomplete="if (args.validationFailed){ agregarDetalle.show()} else {agregarDetalle.hide()}"
                                     />
                    <p:commandButton type="button" value="CANCELAR" style="text-align: center;" onclick="agregarDetalle.hide()"/>
                </p:column>
            </p:row>
        </p:panelGrid> 

    </h:form>
</html>